<template>
  <div>
    <TableHeader />
    <div>
      <el-card class="box-card" v-loading="carbon.loading">
        <template #header>
          <div class="card-header">
            <span>活性炭详情</span>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col class="lg-mb-20" :xs="24" :sm="12" :md="12" :lg="12">
            <div class="carbonChart" ref="carbonChartRef"></div>
          </el-col>
          <el-col class="lg-mb-20" :xs="24" :sm="12" :md="12" :lg="12">
            <div class="detail">
              <el-descriptions
                title="活性炭使用详情"
                :column="2"
                border
                direction="vertical"
              >
                <el-descriptions-item
                  label="活性炭型号"
                  label-align="left"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                  width="150px"
                  >{{ carbon.item.type }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="活性炭重量(吨)"
                  label-align="left"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                  width="150px"
                  >{{ carbon.item.repalcenum }}
                </el-descriptions-item>
                <!-- <el-descriptions-item
                  label="活性炭累计使用时长(小时)"
                  label-align="left"
                  align="center"
                  label-class-name="my-label"
                  class-name="my-content"
                  width="150px"
                  >{{ carbon.item.timeNum }}
                </el-descriptions-item> -->
                <el-descriptions-item
                  label="活性炭剩余时长(小时)"
                  label-align="left"
                  align="center"
                  >{{ (carbon.item.lifeValue - carbon.item.timeNum / 3600).toFixed(2) }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="已更换活性炭次数"
                  label-align="left"
                  align="center"
                  >{{ carbon.item.replaceNum }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="最新更换活性炭时间"
                  label-align="left"
                  align="center"
                >
                  {{ carbon.item.replaceTime }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="最新更换活性炭更换量(吨)"
                  label-align="left"
                  align="center"
                >
                  {{ carbon.item.usernum }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-col>
        </el-row>
        <!-- 活性炭压力情况 -->
        <el-row :gutter="20">
          <el-col class="lg-mb-20" :xs="24" :sm="12" :md="12" :lg="12">
            <div class="carbonKpaChart" ref="carbonKpaChartRef"></div>
          </el-col>
          <el-col class="lg-mb-20" :xs="24" :sm="12" :md="12" :lg="12">
            <div class="detail">
              <el-descriptions
                title="活性炭数值检测"
                :column="2"
                border
                direction="vertical"
              >
                <el-descriptions-item
                  label="压力当前值(pa)"
                  label-align="left"
                  align="center"
                  >{{ state.pa }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="压力初始值(pa)"
                  label-align="left"
                  align="center"
                  >{{ carbon.item.pressureValue }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="告警值(临界值pa)"
                  label-align="left"
                  align="center"
                  >{{ carbon.item.criticalValue }}
                </el-descriptions-item>
                <el-descriptions-item
                  label="修正值(pa)"
                  label-align="left"
                  align="center"
                  >{{ carbon.item.criticalValue - carbon.item.pressureValue }}
                </el-descriptions-item>
              </el-descriptions>
            </div>
          </el-col>
        </el-row>
      </el-card>
      <!-- 活性炭更换历史数据 -->
      <el-card class="box-card">
        <template #header>
          <div class="card-header">
            <span>活性炭更换历史数据</span>
          </div>
        </template>
        <History />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts" setup>
import {
  ref,
  onUnmounted,
  onMounted,
  onActivated,
  watch,
  nextTick,
  computed,
  reactive,
} from "vue";
import TableHeader from "./tableHeader.vue";
import { useCarbon } from "@/store/backend/EquipM/activeCarbon";
import * as echarts from "echarts/core";
import { GaugeChart, GaugeSeriesOption } from "echarts/charts";
import { CanvasRenderer } from "echarts/renderers";
import { useNavTabs } from "@/store/navTabs";
import History from "./history.vue";
import { useBackendMonitor } from "@/store/backend/EquipM/monitor";

const carbon = useCarbon();
const navTabs = useNavTabs();
const monitor = useBackendMonitor();

echarts.use([GaugeChart, CanvasRenderer]);
type EChartsOption = echarts.ComposeOption<GaugeSeriesOption>;

const state: { charts: any[]; pa: any } = reactive({ charts: [], pa: "" });
const carbonChartRef = ref<HTMLElement>(); //获取图表展示的dom 仪表盘图
const carbonKpaChartRef = ref<HTMLElement>(); //获取活性炭数值检测图表展示的dom 仪表盘图

const init = () => {
  const carbonChart = echarts.init(carbonChartRef.value as HTMLElement);
  let option = {
    series: [
      {
        type: "gauge",
        min: 0,
        max: carbon.item.lifeValue,
        progress: {
          show: true,
          width: 18,
        },
        axisLine: {
          lineStyle: {
            width: 18,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          length: 15,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        axisLabel: {
          distance: 25,
          color: "#999",
          fontSize: 15,
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 18,
          itemStyle: {
            borderWidth: 10,
          },
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          fontSize: 25,
          offsetCenter: [0, "70%"],
        },
        data: [
          {
            value: (carbon.item.timeNum/3600).toFixed(2) || 0,
          },
        ],
      },
    ],
  };
  carbonChart.setOption(option);
  state.charts.push(carbonChart);
};
const initKpa = () => {
  const carbonKpaChart = echarts.init(carbonKpaChartRef.value as HTMLElement);
  let option = {
    series: [
      {
        type: "gauge",
        min: 0,
        max: carbon.item.criticalValue,
        progress: {
          show: true,
          width: 18,
        },
        axisLine: {
          lineStyle: {
            width: 18,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          length: 15,
          lineStyle: {
            width: 2,
            color: "#999",
          },
        },
        axisLabel: {
          distance: 25,
          color: "#999",
          fontSize: 15,
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 18,
          itemStyle: {
            borderWidth: 10,
          },
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          fontSize: 25,
          offsetCenter: [0, "70%"],
        },
        data: [
          {
            value: state.pa - 0 || 0,
          },
        ],
      },
    ],
  };
  carbonKpaChart.setOption(option);
  state.charts.push(carbonKpaChart);
};

const echartsResize = () => {
  for (const key in state.charts) {
    state.charts[key].resize();
  }
};

watch(
  () => navTabs.state.tabFullScreen,
  () => {
    echartsResize();
  }
);

onActivated(() => {
  echartsResize();
});

//获取该设备实时最新压强数据
const getPressureNew = () => {
  monitor
    .getNowListObjectForCarbon({ eid: carbon.gatewaycode, pageSize: 1 }, "")
    .then((res: any) => {
      state.pa = res.rows[0].pa;
      console.log("获取该设备实时最新压强数据", res, state.pa);
      initKpa(); //初始化活性炭当前压力值
    });
};

onMounted(() => {
  carbon.loading = false;
  getPressureNew();
  nextTick(() => {
    init();
  });
  window.addEventListener("resize", echartsResize);
});

onUnmounted(() => {
  for (const key in state.charts) {
    state.charts[key].dispose();
  }
  window.removeEventListener("resize", echartsResize);
});
</script>
<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
}

.carbonChart {
  width: 90%;
  height: 450px;
}

//活性炭数值检测仪表图
.carbonKpaChart {
  width: 90%;
  height: 450px;
}

@media screen and (max-width: 1200px) {
  .lg-mb-20 {
    margin-bottom: 20px;
  }
}
</style>
